<template>
    <div class="admin-page">
        <!-- 顶部信息卡片 -->
        <div class="info-cards">
            <div class="info-card">
                <div class="card-content">
                    <div class="card-title">商户编号</div>
                    <div class="card-value">{{ huifu_id }}</div>
                </div>
                <div class="card-icon">
                    <i class="el-icon-office-building"></i>
                </div>
            </div>

            <div class="info-card">
                <div class="card-content">
                    <div class="card-title">
                        账户余额
                        <span class="withdraw-link" @click="showWithdrawDialog">提现</span>
                        <span class="withdraw-link" style="color: #659eff" @click="showBalanceDialog">商户用户余额列表</span>
                    </div>
                    <div class="card-value balance">¥{{ balance }}</div>
                </div>
                <div class="card-icon">
                    <i class="el-icon-wallet"></i>
                </div>
            </div>

            <div class="info-card">
                <div class="card-content">
                    <div class="card-title">结算周期</div>
                    <div class="card-value">{{ settleInfo.settle_cycle }}</div>
                </div>
                <div class="card-icon">
                    <i class="el-icon-time"></i>
                </div>
            </div>
        </div>

        <!-- 提现弹窗 -->
        <el-dialog
            title="商户提现"
            :visible.sync="withdrawDialogVisible"
            width="500px"
            :close-on-click-modal="false"
            center
            custom-class="withdraw-dialog"
        >
            <el-form :model="withdrawForm" :rules="withdrawRules" ref="withdrawForm" label-width="80px">
                <el-form-item label="昵称" prop="nickname" required>
                    <el-input
                        v-model="withdrawForm.nickname"
                        placeholder="昵称"
                        size="small">
                    </el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username" required>
                    <el-input
                        v-model="withdrawForm.username"
                        placeholder="用户名"
                        size="small">
                    </el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="bankCard" required>
                    <el-input
                        v-model="withdrawForm.bankCard"
                        placeholder="银行卡号"
                        size="small">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        v-model="withdrawForm.remarks"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入备注信息"
                        size="small">
                    </el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="withdrawDialogVisible = false" size="small">取消</el-button>
                <el-button type="primary" @click="handleWithdrawSubmit" size="small">保存</el-button>
            </div>
        </el-dialog>

        <!-- 新增：营业执照信息和结算信息，字段与图上一致 -->
        <div class="info-section">
          <!-- 营业执照 -->
          <el-card class="info-block" shadow="never">
            <div slot="header" class="info-title">
              <span>营业执照</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8"><div class="info-item"><span>商户注册名称：</span>{{ merchantInfo.reg_name || '-' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>营业执照编号：</span>{{ merchantInfo.license_code || '-' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>营业执照类型：</span>{{ merchantInfo.license_type === 'NATIONAL_LEGAL_MERGE' ? '营业执照多证合一' : merchantInfo.license_type || '-' }}</div></el-col>
              <el-col :span="24"><div class="info-item"><span>商户注册地址：</span>{{ merchantInfo.reg_detail || '-' }}</div></el-col>
              <el-col :span="24"><div class="info-item"><span>证照有效期：</span>{{ merchantInfo.license_begin_date || '-' }} 至 {{ merchantInfo.license_end_date === '29991231' ? '长期' : merchantInfo.license_end_date || '-' }}</div></el-col>
              <el-col :span="24"><div class="info-item"><span>营业执照：</span>
                <template v-if="openLicenseImg">
                  <img :src="openLicenseImg.file_url" alt="营业执照" style="width:140px;height:auto;border:1px solid #eee;" />
                </template>
                <template v-else>-</template>
              </div></el-col>
              <el-col :span="24"><div class="info-item"><span>开户许可证核准号：</span>{{ merchantInfo.open_licence_no || '-' }}</div></el-col>
            </el-row>
          </el-card>

          <!-- 结算信息 -->
          <el-card class="info-block" shadow="never">
            <div slot="header" class="info-title">
              <span>结算信息</span>
            </div>
            <!-- 账户信息表格 -->
            <el-table :data="accountTableData" border style="margin-bottom:20px;">
              <el-table-column prop="accountNo" label="账户号" align="center" />
              <el-table-column prop="accountName" label="账户名称" align="center" />
              <el-table-column prop="accountType" label="账户类型" align="center" />
              <el-table-column prop="isPayAccount" label="是否支付账户" align="center" />
            </el-table>
            <!-- 自动结算卡信息 -->
            <div class="info-subtitle">自动结算卡信息</div>
            <el-row :gutter="20">
              <el-col :span="8"><div class="info-item"><span>银行账户类型：</span>{{ cashCardInfo.card_type === '0' ? '对公' : '对私' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>银行开户地区：</span>{{ merchantInfo.reg_prov_id | areaName }}-{{ merchantInfo.reg_area_id | areaName }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>银行账户名称：</span>{{ cashCardInfo.card_name || '-' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>银行账户号：</span>{{ cashCardInfo.card_no || '-' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>银行名称：</span>{{ cashCardInfo.bank_name || '-' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>支行名称：</span>{{ cashCardInfo.branch_name || '-' }}</div></el-col>
<!--              <el-col :span="24"><div class="info-item"><span>开户许可证：</span>
                <template v-if="openLicenseImg">
                  <img :src="openLicenseImg.file_url" alt="开户许可证" style="width:140px;height:auto;border:1px solid #eee;" />
                </template>
                <template v-else>-</template>
              </div></el-col>-->
            </el-row>
            <!-- 自动结算配置信息 -->
            <div class="info-subtitle">自动结算配置信息</div>
            <el-row :gutter="20">
              <el-col :span="8"><div class="info-item"><span>结算周期：</span>{{ settleInfo.settle_cycle || '-' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>结算方式：</span>{{ settleInfo.settle_pattern === 'P0' ? '批次结算' : settleInfo.settle_pattern || '-' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>结算批次：</span>{{ settleInfo.settle_time || '00:00:00至23:59:59结算' }}</div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24"><div class="info-item"><span>结算摘要：</span>{{ settleInfo.settle_abstract || '-' }}</div></el-col>
            </el-row>
            <!-- 结算手续费表格 -->
            <el-table :data="feeTableData" border style="margin:20px 0;">
              <el-table-column prop="feeType" label="结算信息手续费类型" align="center" />
              <el-table-column prop="fixAmt" label="结算手续费固定金额" align="center" />
              <el-table-column prop="feeRate" label="结算手续费百分比" align="center" />
            </el-table>
            <el-row :gutter="20">
              <el-col :span="8"><div class="info-item"><span>手续费内外扣标记：</span>{{ settleInfo.fee_inner_outer === '1' ? '内扣' : '外扣' }}</div></el-col>
              <el-col :span="8"><div class="info-item"><span>手续费收取类型：</span>{{ settleInfo.fee_collect_type === '1' ? '实收' : '预收' }}</div></el-col>
            </el-row>
          </el-card>
        </div>

        <!-- 商户用户余额列表弹窗 -->
        <el-dialog
            title="商户用户余额列表"
            :visible.sync="balanceDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <el-table :data="acctInfoList" border>
                <el-table-column prop="acct_id" label="账户ID" align="center" />
                <el-table-column prop="acct_type" label="账户类型" align="center">
                    <template slot-scope="scope">
                        {{ acctTypeText(scope.row.acct_type) }}
                    </template>
                </el-table-column>
                <el-table-column prop="acct_stat" label="账户状态" align="center" />
                <el-table-column prop="avl_bal" label="可用余额" align="center" />
                <el-table-column prop="balance_amt" label="账户余额" align="center" />
                <el-table-column prop="frz_bal" label="冻结余额" align="center" />
                <el-table-column prop="last_avl_bal" label="昨日终余额" align="center" />
                <el-table-column prop="last_balance_amt" label="昨日账户余额" align="center" />
                <el-table-column prop="last_frz_bal" label="昨日冻结余额" align="center" />
                <el-table-column prop="huifu_id" label="汇付ID" align="center" />
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="balanceDialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
     </div>

 </template>

<script>
export default {
    data() {
        return {
            // 交易记录统计数据
            transactionData: [
                {
                    date: '202507',
                    amount: '+¥1,238.00',
                    count: '12'
                }
            ],
            // 提现记录统计数据
            withdrawData: [
                {
                    date: '202507',
                    amount: '¥5,876.00',
                    count: '13'
                }
            ],
            // 用户订单统计数据
            orderData: [
                {
                    month: '202507',
                    amount: '¥5,876.00',
                    quantity: '234'
                }
            ],
            // 提现弹窗相关数据
            withdrawDialogVisible: false,
            withdrawForm: {
                nickname: '',
                username: '',
                bankCard: '',
                remarks: ''
            },
            withdrawRules: {
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                bankCard: [
                    { required: true, message: '请输入银行卡号', trigger: 'blur' },
                    { pattern: /^\d{16,19}$/, message: '请输入正确的银行卡号', trigger: 'blur' }
                ]
            },
            merchantInfo: {},
            settleInfo: {},
            cashCardInfo: {},
            licenseImg: null,
            openLicenseImg: null,
            accountTableData: [],
            feeTableData: [],
            userData:{},
            balanceDialogVisible: false,
            acctInfoList: [],
            huifu_id:'',
            balance:''
        }
    },
    created() {
        this.userData = JSON.parse(localStorage.getItem('huifuUserDetail'));
        // 可以在这里调用接口获取实际数据
        this.getStatisticsData()
        this.getMerchantInfo && this.getMerchantInfo();
    },
    methods: {
        getStatisticsData() {
            // const data = {
            //     huifu_id: "6666000171836458"
            // }
            // this.$http.post('/admin/HuiFuApi/balanceQuery',data).then(result => {
            //     if (result.code === 200) {
            //         console.log(result)
            //     }
            // })
            // this.$http.get('/admin/statistics/withdraw').then(result => {
            //     if (result.code === 200) {
            //         this.withdrawData = result.data
            //     }
            // })
            // this.$http.get('/admin/statistics/order').then(result => {
            //     if (result.code === 200) {
            //         this.orderData = result.data
            //     }
            // })
        },

        // 显示提现弹窗
        showWithdrawDialog() {
            this.withdrawDialogVisible = true;
            // 重置表单
            this.$nextTick(() => {
                this.$refs.withdrawForm && this.$refs.withdrawForm.resetFields();
            });
        },

        // 提交提现申请
        handleWithdrawSubmit() {
            this.$refs.withdrawForm.validate((valid) => {
                if (valid) {
                    // 这里调用提现接口
                    this.$http.post('/admin/withdraw/submit', this.withdrawForm).then(result => {
                        if (result.code === 200) {
                            this.$message.success('提现申请提交成功');
                            this.withdrawDialogVisible = false;
                            // 可以在这里刷新余额数据
                            this.getStatisticsData();
                        } else {
                            this.$message.error(result.msg || '提现申请提交失败');
                        }
                    }).catch(error => {
                        console.error('提现申请失败:', error);
                        this.$message.error('提现申请提交失败，请重试');
                    });
                } else {
                    this.$message.error('请填写完整信息');
                }
            });
        },
        async getMerchantInfo() {
            try {
                const data = {
                    huifu_id: "6666000171836458"
                }
                const res = await this.$http.post('/admin/HuiFuApi/merchantQuery', data);
                if (res.code === 200 && res.data) {
                    this.huifu_id = res.data.huifu_id
                    this.balance = res.data.balance
                    this.merchantInfo = res.data;
                    // 结算信息
                    const settleList = JSON.parse(res.data.qry_settle_config_list || '[]');
                    this.settleInfo = settleList.length ? settleList[0] : {};
                    // 结算卡信息
                    const cardList = JSON.parse(res.data.qry_cash_card_info_list || '[]');
                    this.cashCardInfo = cardList.length ? cardList[0] : {};
                    // 营业执照图片
                    const fileList = JSON.parse(res.data.file_info_list || '[]');
                    this.licenseImg = fileList.find(f => f.file_type === 'F02') || null;
                    this.openLicenseImg = fileList.find(f => f.file_type === 'F07') || null;
                    // 账户信息表格
                    this.accountTableData = [{
                      accountNo: this.cashCardInfo.token_no || '-',
                      accountName: this.cashCardInfo.card_name || '-',
                      accountType: '基本账户',
                      isPayAccount: '支付账户',
                    }];
                    // 结算手续费表格
                    this.feeTableData = [{
                      feeType: '通用',
                      fixAmt: this.settleInfo.constant_amt ? this.settleInfo.constant_amt + '元' : '0元',
                      feeRate: this.settleInfo.fee_rate ? this.settleInfo.fee_rate + '%' : '0.1%'
                    }];
                }
            } catch (e) {
                this.$message && this.$message.error('获取商户信息失败');
            }
        },
        showBalanceDialog() {
            const data = { huifu_id: "6666000171836458" };
            this.$http.post('/admin/HuiFuApi/balanceQuery', data).then(result => {
                if (result.code === 200 && result.data && result.data.acctInfo_list) {
                    this.acctInfoList = JSON.parse(result.data.acctInfo_list);
                    this.balanceDialogVisible = true;
                } else {
                    this.$message.error('获取余额列表失败');
                }
            });
        },
        acctTypeText(type) {
            const map = {
                '01': '基本户',
                '02': '现金户',
                '03': '延时户',
                '04': '钱包户',
                '05': '充值户',
                '09': '营销户'
            };
            return map[type] || type || '-';
        },
    },
    filters: {
      areaName(val) {
        // 这里可根据实际省市区字典做转换
        return val || '-';
      }
    }
}
</script>

<style scoped lang="less">
.admin-page {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.info-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.info-card {
    flex: 1;
    background: white;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .card-content {
        flex: 1;
    }

    .card-title {
        color: #909399;
        font-size: 14px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 10px;

        .withdraw-link {
            color: #67c23a;
            cursor: pointer;
            font-size: 12px;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .card-value {
        color: #303133;
        font-size: 18px;
        font-weight: 600;

        &.balance {
            color: #409eff;
            font-size: 20px;
        }
    }

    .card-icon {
        color: #409eff;
        font-size: 20px;
        margin-left: 15px;
    }
}

.statistics-tables {
    display: flex;
    gap: 20px;
}

.stat-card {
    flex: 1;
    background: white;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .stat-title {
        color: #303133;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .stat-table {
        /deep/ .el-table__header-wrapper {
            .el-table__header {
                th {
                    background-color: #fafafa;
                    color: #909399;
                    font-size: 13px;
                    border-bottom: 1px solid #ebeef5;
                }
            }
        }

        /deep/ .el-table__body-wrapper {
            .el-table__body {
                td {
                    border-bottom: 1px solid #f0f0f0;
                    padding: 8px 0;
                }
            }
        }
    }

    .positive-amount {
        color: #67c23a;
        font-weight: 500;
    }

    .count-badge {
        background-color: #f0f0f0;
        color: #606266;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        display: inline-block;
    }
}

// 响应式设计
@media (max-width: 1200px) {
    .info-cards,
    .statistics-tables {
        flex-direction: column;
    }

         .info-card,
     .stat-card {
         margin-bottom: 15px;
     }
 }

/deep/ .el-dialog__header{
    padding: 10px 0;
    text-align: center;
}

.withdraw-dialog {
    border-radius: 8px;
    overflow: hidden;

    /deep/ .el-dialog__header {
        background-color: #f5f7fa;
        padding: 15px 20px;
        border-bottom: 1px solid #ebeef5;

        .el-dialog__title {
            font-weight: bold;
            color: #303133;
        }
    }

    /deep/ .el-dialog__body {
        padding: 25px 20px 10px;
    }

    /deep/ .el-form-item__label {
        font-weight: 500;
        color: #606266;
    }

    /deep/ .el-dialog__footer {
        border-top: 1px solid #ebeef5;
        padding: 15px 20px;
    }

    .dialog-footer {
        text-align: right;
    }
}
.info-section {
  margin-top: 30px;
  .info-block {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    .info-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 15px;
    }
    .info-item {
      font-size: 14px;
      color: #606266;
      margin-bottom: 10px;
      span {
        color: #909399;
        margin-right: 8px;
      }
    }
    .info-subtitle {
      font-size: 15px;
      font-weight: 500;
      color: #409eff;
      margin: 18px 0 10px 0;
    }
  }
}
</style>
